<template>
	<view style="position:fixed;z-index: -99;left: 9999999px; top:0;width:100%;height:100%;">
		<canvas :style="{ width: width+'px', height: height+ 'px' }" canvas-id="firstCanvas"></canvas>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: Number,
				default: 500,
			},
			height: {
				type: Number,
				default: 400,
			},
			canvasData: {
				type: Object,
				default: () => ({}),
			},
			goods_price: {
				type: String,
				default: ''
			},
			goods_image: {
				type: String,
				default: ''
			}

		},
		data() {
			return {
				context: "",
				time1: "",
				erCode: '',
				posterImage: '',
				canSave: false,
				shareBg: '../static/images/icon/shareBg_test.png',
				canvas_goods_img: '',
				canvas_text: '￥1888'
			};
		},
		onShow() {
			console.log("发送海报");
		},
		created() {

		},
		onReady() {
			// this.canvasImage().then((res)=>{
			// 	console.log(res,'22');
			// 	if(res.code==1){

			// 	}
			// })
		},
		methods: {
			canvasImage() {
				return new Promise((resolve) => {
					this.time1 = setInterval(() => {
						clearInterval(this.time1);
						//把px换算成rpx，绘制自适应canvas海报
						let rpx = 1;
						let that = this;
						console.log('开始绘制');
						let fontSixe = '';
						if (that.goods_price.length > 6) {
							console.log(that.goods_price.length, '字符长度', that.goods_price);
							fontSixe = 'bold 30rpx Sans-serif'
						} else {
							fontSixe = 'bold 40rpx Sans-serif'
							console.log(that.goods_price.length, '字符长度短的');
						}
						uni.getSystemInfo({
							success(res) {
								rpx = res.windowWidth / 375;
								//获取canvas节点
								var context = uni.createCanvasContext("firstCanvas", that);
								console.log(res, '手机信息');
								context.drawImage(that.shareBg, 0, 0, that.width, that.height);
								that.roundImage(context, that.canvas_goods_img, 62, 115, 180, 180,
									10);
								that.roundRect(context, 260, 150, 160, 50, 25, '#DF1222');
								context.setFillStyle("#FFFFFF");
								context.font = 'bold 30rpx Sans-serif';
								context.fillText('限时抢购', 280, 185);
								// context.drawImage(that.canvas_goods_img, 62, 115, 180, 180);
								context.font = fontSixe;
								// context.setTextAlign('start')
								context.setFillStyle("#DF1222")
								let goodsText = '￥' + that.goods_price;
								context.fillText(goodsText, 250, 250);
								context.draw(true, () => {
									setTimeout(() => {
										uni.canvasToTempFilePath({
												canvasId: "firstCanvas",
												fileType: 'png',
												success: (resx) => {
													console.log(
														resx
														.tempFilePath,
														"保存是否成功"
													);
													that.$emit(
														'changeShareImage',
														resx
														.tempFilePath);
												},
												fail: function(error) {
													console.log(error,
														'失败');
												},
											},
											that
										);
									}, 100)
								})
								resolve({
									code: 1
								}); //绘制完成，通知转换canvas为图片
							},
						});

					}, 1000);
				});
			},
			//保存图片的方法
			save() {
				var that = this;
				if (this.canSave) {
					uni.showModal({
						title: "提示",
						content: "是否保存图片并分享？",
						success: (res) => {
							console.log(res, "是否保存图片分享");
							if (res.confirm) {
								console.log("确认保存");
								uni.showLoading({
									title: "保存中...",
								});
								uni.canvasToTempFilePath({
										canvasId: "firstCanvas",
										success: (resx) => {
											console.log(
												resx.tempFilePath,
												"保存是否成功"
											);
											uni.saveImageToPhotosAlbum({
													filePath: resx.tempFilePath,
													success: function() {
														uni.hideLoading();
														uni.showToast({
															title: "已经保存到相册，可以分享了",
															icon: "none",
														});
														that.$emit("sendmes",
															100); //告诉父组件图片保存成功
													},
												},

											);
										},
										fail: function(error) {
											uni.hideLoading();
										},
									},

								);
							} else if (res.cancel) {}
						},
					});
				} else {
					this.$mUtils.toast('海报正在绘制中，请稍后...');
				}
			},
			roundImage(context, img, x, y, w, h, r) {
				if (w < 2 * r) {
					r = w / 2;
				}
				if (h < 2 * r) {
					r = h / 2;
				}
				context.save(); //保存前面绘制的内容
				context.beginPath();
				context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
				context.moveTo(x + r, y);
				context.lineTo(x + w - r, y);
				context.lineTo(x + w, y + r);
				context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
				context.lineTo(x + w, y + h - r);
				context.lineTo(x + w - r, y + h);
				context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
				context.lineTo(x + r, y + h);
				context.lineTo(x, y + h - r);
				context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
				context.lineTo(x, y + r);
				context.lineTo(x + r, y);
				context.clip(); //裁剪上述区域
				context.drawImage(img, x, y, w, h, r); //把图片加到上述裁剪后的区域
				context.restore();
				// context.fill();
				context.closePath();
			},
			/**
			 * 绘制圆角矩形
			 * @param {Object} ctx - canvas组件的绘图上下文
			 * @param {Number} x - 矩形的x坐标
			 * @param {Number} y - 矩形的y坐标
			 * @param {Number} w - 矩形的宽度
			 * @param {Number} h - 矩形的高度
			 * @param {Number} r - 矩形的圆角半径
			 * @param {String} [c = 'transparent'] - 矩形的填充色#F8753E
			 */
			roundRect(context, x, y, w, h, r, c) {
				context.beginPath();
				context.fillStyle = c;
				context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
				context.moveTo(x + r, y); //把画笔移动到某点
				context.lineTo(x + w - r, y); //画一条x点到y点的线
				context.lineTo(x + w, y + r);
				context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
				context.lineTo(x + w, y + h - r);
				context.lineTo(x + w - r, y + h);
				context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
				context.lineTo(x + r, y + h);
				context.lineTo(x, y + h - r);
				context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
				context.lineTo(x, y + r);
				context.lineTo(x + r, y);
				context.fill();
				context.closePath();
			},
			getPropsIamge(val) {
				let idx = this.goods_image.indexOf('https');
				let idx2 = this.goods_image.indexOf('//uploads');
				if (idx == -1) {
					this.goods_image = this.goods_image.replace('http', 'https');
				}
				if (idx2 != -1) {
					this.goods_image = this.goods_image.replace('//uploads', '/uploads');
				}
				console.log(this.goods_image, '执行力是', this.goods_price);
				uni.getImageInfo({
					src: this.goods_image,
					success: (response) => {
						console.log(response, '转化临时链接')
						this.canvas_goods_img = response.path;
						this.canvasImage().then((res) => {
							console.log(res, 'sss');
							this.canSave = true;
						});
					},
					fail: (error) => {
						console.log(error, '错误0');
					}
				})

			}

		},
	};
</script>